<template>
  <div class="pages">
    <p class="jichu">商家信息</p>
    <el-form :model="ruleForms" :rules="rules" ref="ruleForms" label-width class="demo-ruleForm">
      <el-form-item label="添加商家头图(1~6张）" prop="image1">
        <span class="tip-message">注：图片仅支持jpg、jpeg、png格式，宽300像素，高200像素，大小不能超过5M</span>

        <div class="img-list">
          <div class="img-content" v-for="(item,key) in imagelists" :key="key">
            <img :src="item.imageUrl" />
            <div class="bottom">
              <div class="replace">
                <div>更换图片</div>
                <input type="file" @change="replaceImg(item,key,$event)" />
              </div>
              <div class="delete" @click="handleFileRemove(item,key)">删除图片</div>
            </div>
          </div>
          <div class="img-upload" v-if="buttonImg">
            <el-upload
              class="uploader"
              accept="image/*"
              ref="upload"
              list-type="picture-card"
              :show-file-list="false"
              :action="'123'"
              :on-change="uploadOnChange"
              :http-request="uploadSectionFile"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="添加普通照片(3～20张）" prop="image2">
        <span class="tip-message">注：图片仅支持jpg、jpeg、png格式，宽300像素，高200像素，大小不能超过5M</span>
        <div class="img-list">
          <div class="img-content" v-for="(item,key) in imagelists1" :key="key">
            <img :src="item.imageUrl" />
            <div class="bottom">
              <div class="replace">
                <div>更换图片</div>
                <input type="file" @change="replaceImg1(item,key,$event)" />
              </div>
              <div class="delete" @click="handleFileRemove1(item,key)">删除图片</div>
            </div>
          </div>
          <div class="img-upload" v-if="buttonImg1">
            <el-upload
              class="uploader"
              accept="image/*"
              ref="upload"
              list-type="picture-card"
              :show-file-list="false"
              :action="'123'"
              :on-change="uploadOnChange1"
              :http-request="uploadSectionFile1"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="添加标签" prop="selectObj">
        <el-input
          v-model="labelName"
          style="width: 450px;"
          placeholder="请输入自定义标签"
          maxlength="6"
          show-word-limit
        ></el-input>
        <el-button @click="addCustomLabel(labelName)">添加</el-button>
        <div class="selected-label-box">
          <el-tag
            :key="key"
            v-for="(tag,key) in ruleForms.selectObj"
            closable
            :disable-transitions="false"
            @close="handleCloseLabel(tag)"
          >{{tag}}</el-tag>
        </div>
        <div class="label-box">
          <el-checkbox-group v-model="ruleForms.selectObj">
            <el-checkbox
              v-for="item in systemLabelList"
              :label="item"
              :key="item "
              @change="limitLabelNum(item)"
            >{{item}}</el-checkbox>
          </el-checkbox-group>
          <p class="tip-message">选择标签1~4个 自定义标签长度最多6个字</p>
        </div>
      </el-form-item>
      <el-form-item label="位置参考" prop="addrGuide" id>
        <el-input
          type="text"
          placeholder="如：距名创品步行街1.5KM"
          v-model="ruleForms.addrGuide"
          style="width: 550px;"
        ></el-input>
        <span class="tip-message">（1～30字）</span>
      </el-form-item>
      <p class="jichu">商家介绍图文详情</p>
      <el-form-item label="商家介绍" prop="mechatIntro" id="service">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="如：麦贝水育是一家专业的婴幼儿游泳机构，致力于0-6岁宝宝游泳、洗澡、护理。给宝宝最贴心的呵护和最专业的服务。"
          v-model="ruleForms.mechatIntro"
          style="width: 550px;"
          maxlength="60"
        ></el-input>
        <span class="tip-message">（12～60字）</span>
      </el-form-item>
      <el-form-item label="添加项目" prop="image3" id="addProject">
        <div class="img-upload">
          <el-button type="primary" class="uploader" @click="uploadIntroduce" v-if="buttonImg3">添加项目</el-button>
        </div>
        <div class="img-list">
          <div class="img-content" v-for="(item,key) in imagelist2" :key="key">
            <div class="top">{{item.imageName}}</div>
            <img :src="item.imageUrl" />
            <div class="center" style="margin-top:0px">{{item.remark}}</div>
            <div class="bottom">
              <div class="replace">
                <div @click="editIntroduce(item,key)">编辑</div>
              </div>
              <div class="delete" @click="handleFileRemove2(item,key)">删除</div>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-dialog title="添加项目" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <div>
          <el-form-item label="项目名称" prop id label-width="68px">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="dialogName"
              style="width: 450px;"
              maxlength="6"
            ></el-input>
            <span class="tip-message">（1～6字）</span>
          </el-form-item>
          <el-form-item label="项目图片" prop id label-width="68px">
            <el-upload
              :action="'123'"
              list-type="picture"
              class="avatar-uploader"
              :show-file-list="false"
              :http-request="uploadSectionFiles"
            >
              <!-- :on-remove="handleRemove" :before-upload="beforeAvatarUpload" -->
              <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="项目描述" prop id label-width="68px">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="dialogIntroduce"
              style="width: 450px;"
              maxlength="16"
            ></el-input>
            <span class="tip-message">（1～16字）</span>
          </el-form-item>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addIntroduce" v-if="buttonImg2">确 定</el-button>
          <el-button type="primary" @click="addIntroduces" v-else>确 定</el-button>
        </span>
      </el-dialog>

      <p class="jichu">游玩须知</p>
      <el-form-item label="设施包括" prop="facilitiesList">
        <div style="float:left;" v-for="(item,index) in ruleForms.facilitiesList" :key="index">
          <el-input
            placeholder="请输入内容"
            v-model="ruleForms.facilitiesList[index]"
            class="input-with-select"
            style="width:200px;"
            maxlength="6"
          >
            <el-select
              v-model="facilitiesContent"
              slot="append"
              placeholder="请选择"
              @change="chooseFacilities(index)"
            >
              <el-option :value="item.name" v-for="(item,index) in facilities" :key="index"></el-option>
            </el-select>
          </el-input>
          <span style="margin:0 10px;" @click="ruleForms.facilitiesList.splice(index, 1)">删除</span>
        </div>
        <el-button
          type="primary"
          size="small"
          style="float:left;margin-top:5px;"
          @click="addFacilities"
        >添加</el-button>
        <p class="tip-message" style="clear:both; padding-left: 68px">最多添加12项，自定义标签长度最多6个字</p>
      </el-form-item>
      <div>开放时间</div>
      <el-form-item label="营业日期" prop="checkboxGroup">
        <el-checkbox-group v-model="ruleForms.checkboxGroup" size="medium">
          <el-checkbox-button
            v-for="city in cities"
            :label="city"
            :key="city"
            style="margin-left:0px;"
          >{{city}}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="交通信息" prop="tranInfo" id>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="如：公交：距813路，834路，平西王府路口北，向南步行400米即到"
          v-model="ruleForms.tranInfo"
          style="width: 550px;"
        ></el-input>
        <span class="tip-message">（最多60字）</span>
      </el-form-item>
      <el-form-item label="适合年龄" prop>
        <div style="width:400px;border-radius: 5px;background: #fff;">
          <div style="float:left;width:150px;overflow:hidden">
            <el-select v-model="fitAge1" placeholder="请选择" size="small" style="width:150px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div style="float:left;width:30px;text-align:center;">-</div>
          <div style="float:left;width:150px;overflow:hidden">
            <el-select v-model="fitAge2" placeholder="请选择" size="small" style="width:150px;" @change="limitAge">
              <el-option value="-1" label="不限制">不限制</el-option>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-form-item>
      <div>停车场信息</div>
      <el-form-item label="名称" prop id label-width="68px">
        <el-input
          type="text"
          placeholder="如：韩荣家园停车场"
          v-model="stopPace"
          style="width: 550px;"
          maxlength="30"
          minlength="4"
          @blur="limitMinLength(stopPace)"
        ></el-input>
        <span class="tip-message">（4~30字）</span>
      </el-form-item>
      <el-form-item label="参考价格" prop id>
        <el-input
          type="text"
          placeholder="如：店内领取免费停车劵"
          v-model="stopPaceIntro"
          style="width: 550px;"
          maxlength="60"
          @blur="limitMinLength(stopPaceIntro)"
        ></el-input>
        <span class="tip-message">（4~60字）</span>
      </el-form-item>
      <div>卫生安全</div>
      <el-form-item label="游泳区" prop id label-width="68px" v-if="unPostpartum">
        <el-input
          type="text"
          placeholder="如：每天清洁两次，备有免洗手喷雾剂"
          v-model="healthSafeSwim"
          style="width: 550px;"
          maxlength="60"
          @blur="limitMinLength(healthSafeSwim)"
        ></el-input>
        <span class="tip-message">（4~60字）</span>
      </el-form-item>
      <el-form-item label="水池" prop id label-width="68px" v-if="unPostpartum">
        <el-input
          type="text"
          placeholder="如：每8小时换一次水"
          v-model="healthSafePool"
          style="width: 550px;"
          maxlength="60"
          @blur="limitMinLength(healthSafePool)"
        ></el-input>
        <span class="tip-message">（4~60字）</span>
      </el-form-item>
      <el-form-item label="卫生保障" prop id label-width="68px" v-if="isPostpartum">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="如：1.被子每周清洗一次, 浴巾,小毛巾,床单一客一换
      2.毛巾煮沸消毒,用具紫外线消毒
      3.眼看不乱,手摸无尘,整齐干净明亮"
          v-model="healthSecurity"
          style="width: 550px;"
          maxlength="60"
          @blur="limitMinLength(healthSecurity)"
        ></el-input>
        <span class="tip-message">（4~60字）</span>
      </el-form-item>
      <el-form-item label="温馨提示" prop id="mrimg">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="如：请携带宝宝个人浴巾、尿片、洗护用品及换洗衣物；8个月以下宝宝请携带防水纸尿裤；泳前半小时内请勿进食；打预防针72小时才可游泳"
          v-model="warmPrompt"
          style="width: 550px;"
          maxlength="100"
          @blur="limitMinLength(warmPrompt)"
        ></el-input>
        <span class="tip-message">（4~100字）</span>
      </el-form-item>
    </el-form>
    <div style="width:500px;  margin:50px 20px 50px 30px;" class="foot">
      <el-button type="primary" class="Determine" @click="preservation('ruleForms')">保存</el-button>
    </div>
  </div>
</template>
<script>
import {
  getFile,
  uploadFile,
  getManagementTypeList,
  addMechatsInfo,
  shopConfigDetails
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    let checkLabel = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请添加标签"));
      }
    };
    return {
      ruleForms: {
        selectObj: [], //标签列表
        addrGuide: "", //位置参考
        mechatIntro: "", //商家介绍
        facilitiesList: [], //设施选择
        checkboxGroup: [], //营业日期
        startTime: "", //营业时间
        endTime: "",
        tranInfo: "" //交通信息
      },
      rulesza: {},
      rules: {
        image1: [],
        // image2:[{ required: true}],
        // image3:[{ required: true}],
        // selectObj: [{ validator: checkLabel, trigger: "blur" }],
        addrGuide: [
          { required: true, message: "请输入位置参考", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字", trigger: "blur" }
        ],
        mechatIntro: [
          { required: true, message: "请输入商家介绍", trigger: "blur" },
          {
            min: 12,
            max: 60,
            message: "长度在 12 到 60 个字",
            trigger: "blur"
          }
        ],
        facilitiesList: [
          { required: true, message: "请选择设施", trigger: "change" }
        ],
        checkboxGroup: [
          { required: true, message: "请选择营业日期", trigger: "change" }
        ],
        // startTime: [
        //   { required: true, message: "请选择营业时间", trigger: "change" }
        // ],
        // endTime: [
        //   { required: true, message: "请选择营业时间", trigger: "change" }
        // ],
        tranInfo: [
          { required: true, message: "请输入交通信息", trigger: "blur" },
          { min: 4, max: 60, message: "长度在 4 到 60 个字", trigger: "blur" }
        ]
      },
      ruleForm: {},
      showImg: "", //上传图片
      pass: null, //是否上传成功1
      imagelist: [], //头图
      imagelists: [], //头图
      imagelist1: [], //普通图
      imagelists1: [], //普通图
      imagelist2: [], //项目列表
      dialogName: "", //项目名称
      dialogImageUrl: "", //项目图片
      dialogIntroduce: "", //项目描述
      dialogVisible: false, //添加项目弹窗
      cities: ["周一", "周二", "周三", "周四", "周五", "周六", "周日", "无"], //日期选择
      checkboxGroup: [],
      options: [
        { value: "0", label: "0岁" },
        { value: "1", label: "1岁" },
        { value: "2", label: "2岁" },
        { value: "3", label: "3岁" },
        { value: "4", label: "4岁" },
        { value: "5", label: "5岁" },
        { value: "7", label: "7岁" },
        { value: "8", label: "8岁" },
        { value: "9", label: "9岁" },
        { value: "10", label: "10岁" },
        { value: "11", label: "11岁" },
        { value: "12", label: "12岁" },
        { value: "13", label: "13岁" },
        { value: "14", label: "14岁" },
        { value: "15", label: "15岁" },
        { value: "16", label: "16岁" },
        { value: "17", label: "17岁" },
        { value: "18", label: "18岁" },
        { value: "19", label: "19岁" },
        { value: "20", label: "20岁" }
      ],

      value: "",
      addLabel: 0,

      systemLabelList: [
        "0~6岁",
        "泳前澡",
        "智能游泳圈",
        "游乐区",
        "婴儿游泳",
        "图书馆",
        "抚触按摩",
        "测量身高体重",
        "备孕管理",
        "体型管理",
        "皮肤管理",
        "产后气血管理",
        "保健养生",
        "疏通经络",
        "排毒养颜"
      ],
      facilities: [
        {
          name: "母婴室",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/my.png"
        },
        {
          name: "休息区",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/xxs.png"
        },
        {
          name: "免费停车",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/tc.png"
        },
        {
          name: "场内厕所",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/cs.png"
        },
        {
          name: "免费wifi",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/wifi.png"
        },
        {
          name: "寄存区",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/jc.png"
        },
        {
          name: "换鞋区",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/hx.png"
        },
        {
          name: "免费零食",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/ls.png"
        },
        {
          name: "一对一",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/ydy.png"
        },
        {
          name: "主题活动",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/hd.png"
        },
        {
          name: "免费点心",
          img: "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/dx.png"
        }
      ], //设施选择

      facilitiesContent: "", //选择的设施
      fitAge1: "",
      fitAge2: "",
      fitAge: [], //年龄选择
      stopPace: "", //停车场信息
      stopPaceIntro: "", //参考价格
      healthSafeSwim: "", //游泳区
      healthSafePool: "", //水池
      warmPrompt: "", //温馨提示

      buttonLable: true,
      buttonImg: true,
      buttonImg1: true,
      buttonImg2: true,
      buttonImg3: true,
      buttonImgList: 0,
      labelName: "", // 输入的标签
      facilitiesContent: "",
      isPostpartum: false,
      unPostpartum: false,
      healthSecurity: "",
      minLength: true
    };
  },
  created() {
    getManagementTypeList({ shopId: this.merchantId }).then(res => {
      // for test
      // let res = {
      //   msg: "成功",
      //   code: 200,
      //   data: {
      //     list: [
      //       {
      //         createTime: 1562144651000,
      //         dr: 0,
      //         id: "1",
      //         name: "产康养生",
      //         updateTime: null
      //       },
      //       {
      //         createTime: 1562144612000,
      //         dr: 0,
      //         id: "0",
      //         name: "婴幼儿游泳",
      //         updateTime: null
      //       }
      //     ]
      //   }
      // };
      let postpartumArr = [];
      for (let i = 0; i < res.data.list.length; i++) {
        const element = res.data.list[i];
        if (element.id == 1) {
          this.isPostpartum = true;
        } else {
          postpartumArr.push(element.name);
        }
      }
      if (postpartumArr.length > 0) {
        this.unPostpartum = true;
      }
    });
    let data = new FormData();
    data.append("shopId", this.merchantId);
    shopConfigDetails(data).then(res => {
      this.ruleForms.selectObj = res.data.mechantTab.split(",");
      this.ruleForms.mechatIntro = res.data.mechantIntro;
      this.healthSecurity = res.data.healthSecurity;

      var param = JSON.parse(res.data.mechantItem);
      var arr = [];
      for (let i = 0; i < param.length; i++) {
        arr.push(param[i].name);
      }
      let fitAgeArr = res.data.fitAge.split(",");
      this.ruleForms.facilitiesList = arr;
      this.ruleForms.checkboxGroup = res.data.businessWeek.split(",");
      this.ruleForms.tranInfo = res.data.tranInfo;
      this.ruleForms.addrGuide = res.data.addrGuide;
      this.fitAge1 = fitAgeArr[0];
      this.fitAge2 = fitAgeArr[1];
      this.stopPace = res.data.stopPace;
      this.stopPaceIntro = res.data.stopPaceIntro;
      this.healthSafeSwim = res.data.healthSafeSwim;
      this.healthSafePool = res.data.healthSafePool;
      this.warmPrompt = res.data.warmPrompt;
      // this.imagelist = res.data.mechatsBannerImages
      this.imagelists = res.data.mechatsBannerImages;
      this.imagelists1 = res.data.mechatsCommImages;
      this.imagelist2 = res.data.mechatItems;
    });
  },
  methods: {
    limitAge() {
      if (this.fitAge2 == -1) {
        return  false;
      }
      if(parseInt(this.fitAge2) < parseInt(this.fitAge1)) {
        this.$message.error("起始年龄不能大于结束年龄")
        this.fitAge2 = ""
      }
    },
    limitMinLength(val) {
      if (val.length < 4 && val.length != 0) {
        this.$message.error("输入长度小于4, 请重新输入");
        this.minLength = false;
      } else {
        this.minLength = true;
      }
    },
    uploadOnChange(param) {
      this.pass = true;
      // this.$message.success("上传成功");
    },
    uploadSectionFile(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("projectName", "上传商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        let a = `${getFile}?id=${res.data.id}`;
        this.imagelists.push({
          shopId: this.merchantId,
          imageUrl: a,
          imageType: "0",
          imageName: "商家头图"
        });
      });
    },
    uploadOnChange1(file) {
      this.pass = true;
      this.$message.success("上传成功");
    },
    replaceImg(a, i, e) {
      var fileObj = e.target.files[0];
      var data = new FormData();
      data.append("projectName", "商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        let a = `${getFile}?id=${res.data.id}`;
        this.imagelists[i].imageUrl = a;
        this.imagelistss[i].imageUrl = a;
      });
    },
    handleFileRemove(file, i) {
      //删除图片
      if (!file.imageUrl) {
        return false;
      }
      let that = this;
      this.$confirm("是否删除此图片？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.imagelists.splice(i, 1);
        })
        .catch(meg => console.log(meg));
    },
    handleFileRemove1(file, i) {
      //删除图片
      if (!file.imageUrl) {
        return false;
      }
      let that = this;
      this.$confirm("是否删除此图片？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.imagelists1.splice(i, 1);
        })
        .catch(meg => console.log(meg));
    }, //第三个
    replaceImg2(a, i, e) {
      var fileObj = e.target.files[0];
      var data = new FormData();
      data.append("projectName", "商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        let a = `${getFile}?id=${res.data.id}`;
        this.imagelist2[i].imageUrl = a;
        this.imagelists2[i].imageUrl = a;
      });
    },
    uploadSectionFile2(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("projectName", "商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        let a = `${getFile}?id=${res.data.id}`;
        this.imagelists2.push({
          shopId: this.merchantId,
          imageUrl: a,
          imageType: "2"
        });
      });
    },
    uploadOnChange2(file) {
      this.pass = true;
      this.$message.success("上传成功");
      this.imagelist2.push({
        imageUrl: file.url
      });
    },
    handleFileRemove2(file, i) {
      //删除图片
      // if (!file.imageUrl) {
      //   return false;
      // }
      let that = this;
      this.$confirm("是否删除此项目？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.imagelist2.splice(i, 1);
          that.imagelists2.splice(i, 1);
        })
        .catch(meg => console.log(meg));
    },
    uploadSectionFile1(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("projectName", "商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        let a = `${getFile}?id=${res.data.id}`;
        this.imagelists1.push({
          shopId: this.merchantId,
          imageUrl: a,
          imageType: "1",
          imageName: "普通照片"
        });
      });
    },
    uploadIntroduce() {
      //上传项目
      this.dialogVisible = true;
      this.dialogName = "";
      this.dialogImageUrl = "";
      this.dialogIntroduce = "";
    },
    addIntroduce() {
      //添加项目
      this.imagelist2.push({
        shopId: this.merchantId,
        imageName: this.dialogName,
        imageUrl: this.dialogImageUrl,
        remark: this.dialogIntroduce,
        imageType: "2"
      });
      this.dialogVisible = false;
    },
    addIntroduces() {
      //编辑项目
      this.imagelist2[this.buttonImgList].imageName = this.dialogName;
      this.imagelist2[this.buttonImgList].imageUrl = this.dialogImageUrl;
      this.imagelist2[this.buttonImgList].remark = this.dialogIntroduce;
      this.dialogVisible = false;
    },
    editIntroduce(a, i) {
      //编辑项目
      this.buttonImgList = i;
      this.dialogVisible = true;
      this.buttonImg2 = false;
      this.dialogName = this.imagelist2[i].imageName;
      this.dialogImageUrl = this.imagelist2[i].imageUrl;
      this.dialogIntroduce = this.imagelist2[i].remark;
    },
    chooseFacilities(i) {
      this.ruleForms.facilitiesList[i] = this.facilitiesContent;
    },
    findScheduleList() {
      let idData = {
        orgId: this.merchantId
      };
      findScheduleList(idData).then(res => {
        this.findList = res.data.list;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    uploadSectionFiles(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("projectName", "商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        let a = `${getFile}?id=${res.data.id}`;
        this.dialogImageUrl = a;
        this.sListData = res.data.sList;
      });
    },
    replaceImg1(a, i, e) {
      var fileObj = e.target.files[0];
      var data = new FormData();
      data.append("projectName", "商家头图");
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        // this.imagelist1[i].imageUrl = res.data.showImg;
        let a = `${getFile}?id=${res.data.id}`;
        this.imagelists1[i].imageUrl = a;
        // this.imagelists1[i].imageUrl = res.data.showImg;
      });
    },
    addLabelList() {
      //添加标签
      if (this.ruleForms.labelList.length == 4) {
        this.$message({
          message: "最多4条",
          type: "warning"
        });
        return false;
      } else {
        this.ruleForms.labelList.push("");
      }
    },
    addFacilities() {
      //添加设施
      if (this.ruleForms.facilitiesList.length == 12) {
        this.$message({
          message: "最多12条",
          type: "warning"
        });
        return false;
      } else {
        this.ruleForms.facilitiesList.push("");
      }
    },
    addCustomLabel(item) {
      let index = this.ruleForms.selectObj.indexOf(item);

      if (index > -1) {
        this.$message.error("当前标签已经存在, 请重新添加");
        return false;
      }

      if (this.ruleForms.selectObj.length === 4) {
        this.$message.error("最多添加4个标签");
      } else {
        this.ruleForms.selectObj.push(item);
        this.labelName = "";
      }
    },
    handleCloseLabel(tag) {
      this.ruleForms.selectObj.splice(this.ruleForms.selectObj.indexOf(tag), 1);
    },
    limitLabelNum(item) {
      if (this.ruleForms.selectObj.length > 4) {
        this.$message.error("最多添加4个标签");
        this.ruleForms.selectObj.splice(
          this.ruleForms.selectObj.indexOf(item),
          1
        );
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getContent();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    preservation(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.imagelists.length >= 1) {
            if (this.imagelists1.length >= 3) {
              if (this.imagelist2.length >= 2) {
                if (this.ruleForms.selectObj.length !== 0) {
                  if (this.fitAge2 != "") {
                    this.fitAge[0] = this.fitAge1;
                    this.fitAge[1] = this.fitAge2;
                  }
                  if (this.minLength) {
                    let data = new FormData();
                    data.append("shopId", this.merchantId);
                    data.append(
                      "mechatTabs",
                      this.ruleForms.selectObj.join(",")
                    );
                    data.append("mechatIntro", this.ruleForms.mechatIntro);
                    data.append("healthSecurity", this.healthSecurity);
                    data.append("businessWeek", this.ruleForms.checkboxGroup);
                    data.append("tranInfo", this.ruleForms.tranInfo);
                    data.append("addrGuide", this.ruleForms.addrGuide);
                    data.append("fitAge", this.fitAge);
                    data.append("stopPace", this.stopPace);
                    data.append("stopPaceIntro", this.stopPaceIntro);
                    data.append("healthSafeSwim", this.healthSafeSwim);
                    data.append("healthSafePool", this.healthSafePool);
                    data.append("warmPrompt", this.warmPrompt);

                    let self = this;
                    let arr = this.ruleForms.facilitiesList.map(function(item) {
                      var pic = null;
                      for (let i = 0; i < self.facilities.length; i++) {
                        if (self.facilities[i].name == item) {
                          pic = self.facilities[i].img;
                        }
                      }
                      if (pic == null) {
                        pic =
                          "https://sd-picture-oss.oss-cn-beijing.aliyuncs.com/mr.png";
                      }
                      return {
                        name: item,
                        src: pic
                      };
                    });
                    data.append("mechatFacility", JSON.stringify(arr));
                    data.append(
                      "mechatsBannerImages",
                      JSON.stringify(this.imagelists)
                    );
                    data.append(
                      "mechatsCommImages",
                      JSON.stringify(this.imagelists1)
                    );
                    data.append("mechatItems", JSON.stringify(this.imagelist2));
                    addMechatsInfo(data).then(res => {
                      if (res.code == 200) {
                        this.$message({
                          type: "success",
                          message: "保存成功"

                          // onClose: () => {
                          //   this.$router.go(0);
                          // }
                        });
                      }
                    });
                  }else {
                     this.$message.error("请检查输入内容是否正确");
                  }
                } else {
                  this.$message.error("最少选择一个标签");
                }
              } else {
                this.$message.error("最少上传两个项目");
              }
            } else {
              this.$message.error("最少上传三张普通图片");
            }
          } else {
            this.$message.error("最少上传一张商家头图");
          }
        } else {
          this.$message({
            type: "error",
            message: "请填写完整信息"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.pages {
  padding: 10px 40px;
}
.tip-message {
  font-size: 12px;
  /* */
}
.label-box {
  width: 620px;
  background: #fff;
  margin: 20px 69px;
  padding: 10px;
}
.label-box span {
  display: inline-block;
  margin-right: 30px;
}
.selected-label-box {
  width: 620px;
  margin-left: 68px;
}
.selected-label-box .el-tag {
  margin-right: 15px;
}
.jichu {
  width: 100%;
  color: #444;
  font-size: 14px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 178px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
* {
  box-sizing: border-box;
}
.img-list {
  overflow: hidden;
  width: 100%;
  padding-left: 68px;
}
.img-list .img-content {
  float: left;
  text-align: left;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 240px;
  padding: 5px;
  margin: 5px 20px 20px 0;
  border: 1px solid #d1dbe5;
  border-radius: 4px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.img-list .img-content img {
  display: block;
  width: 100%;
  height: 190px;
  margin: 0 auto;
  border-radius: 4px;
}
.img-list .img-content .name {
  margin-top: 10px;
}
.img-list .img-content .name > div {
  width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
}
.img-list .img-content:hover .del,
.img-list .img-content:hover .layer {
  opacity: 1;
}
.img-list .img-content .del,
.img-list .img-content .layer {
  opacity: 0;
  transition: all 0.3s;
}
.img-list .img-content .del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.img-list .img-content .layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  color: #fff;
  text-align: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.4);
}
.img-list .img-content .layer i {
  font-size: 1.6em;
  margin-top: 80px;
}
.img-list .img-upload {
  float: left;
  width: 200px;
  height: 240px;
  display: table;
  text-align: center;
}
.img-list .uploader {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.bottom {
  width: 100%;
  margin-top: 10px;
}
.replace {
  float: left;
  width: 50%;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: relative;
  overflow: hidden;
}
.replace div {
  position: absolute;
  width: 100%;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
.replace input {
  position: absolute;
  opacity: 0;
  width: 100%;
  left: 0;
}
.delete {
  float: left;
  width: 50%;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
.top {
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.center {
  height: 30px;
  line-height: 1.3;
}
#addProject .img-list .img-content {
  height: 300px;
}
</style>

